<template>
  <div class="search-popup">
    <md-popup v-model="isPopupShow" position="right">
      <div class="content">
        <div class="content-hd">搜索</div>
        <md-field>
          <md-field-item title="地市" placeholder="请选择"
                         :content="form.cityName"
                         arrow solid
                         @click="isAreaSelectorShow = true"/>
          <md-input-item title="区县" placeholder="请输入" v-model="form.districtName"/>
        </md-field>
        <div class="content-ft">
          <md-button @click="reset">重置</md-button>
          <md-button type="primary" @click="search">搜索</md-button>
        </div>
      </div>
    </md-popup>
    <md-selector v-model="isAreaSelectorShow"
                 :default-value="form.cityName"
                 :data="areaList" max-height="320px"
                 title="客户地市" @choose="onAreaChoose"/>
  </div>
</template>

<script type="text/ecmascript-6">
import moment from 'moment';
import { mapState } from 'vuex';
import {
  Field,
  Selector,
  InputItem,
  FieldItem,
  Button,
  DatePicker,
  Popup,
  PopupTitleBar
} from 'mand-mobile';

export default {
  name: 'dx-search-excessive',
  components: {
    [Field.name]: Field,
    [Selector.name]: Selector,
    [InputItem.name]: InputItem,
    [FieldItem.name]: FieldItem,
    [Button.name]: Button,
    [DatePicker.name]: DatePicker,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar
  },
  props: {
    // 格式为查询参数，例如 customerCode=1212&customerName=测试
    defaultValue: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState({
      areaList: state => state.library.areaList.map(item => ({ text: item, value: item }))
    })
  },
  data() {
    return {
      isPopupShow: false,
      isStartTimePickerShow: false,
      isAreaSelectorShow: false,
      form: {}
    };
  },
  // model: {
  //   prop: 'defaultValue',
  //   event: 'change'
  // },
  created() {
    this.form.cityName = this.defaultValue;
    // this.reset();
  },
  methods: {
    showPopup() {
      this.isPopupShow = true;
    },
    onStartTimeConfirm() {
      const time = this.$refs.startTimePicker.getFormatDate();
      this.form.eventTimeStart = moment(time, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DD HH:mm:ss');
    },
    onAreaChoose({ text }) {
      this.form.cityName = text;
    },
    reset() {
      this.form = {
        cityName: '',
        districtName: ''
      };
      if (this.defaultValue) {
        const queryList = this.defaultValue.split('&');
        queryList.forEach(query => {
          const strArr = query.split('=');
          this.form[strArr[0]] = strArr[1];
        });
      }
    },
    search() {
      this.isPopupShow = false;
      this.$emit('on-search', this.form);
    }
  }
};
</script>

<style lang="stylus" scoped>
  .search-popup
    /deep/ .md-slide-left
      width: 80%

    ::v-deep.md-field-item.is-solid
      .md-field-item-title
        width: 200px

    .content
      position: relative
      height: 100%
      background: #fff

      .content-hd
        height: 88px
        line-height: 88px
        font-size: 32px
        text-align: center

      .content-ft
        position: absolute
        bottom: 0
        padding: 20px
        display: flex
        width: 100%

        .md-button
          margin-right: 20px

          &:last-of-type
            margin-right: 0

    .md-field
      padding: 0 20px
</style>
